import BaseComponent from "../../app/baseComponent";
import { createSubpageComponent } from "../page.component";

import { AUITabnavs } from "./tabnavs";

class UiExampleTab extends BaseComponent {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <div class="subpage-navs" style="border-bottom: 1px solid #D3DCE6;">
        <div class="aui-layout aui-layout-grid align-item-center aui-align-justify">
            <aui-tabnavs class="aui-item-justify aui-layout__item" ref="tabs" :tabs="tabs">    
                <li class="aui-display-inline-block-i" style="vertical-align: middle" slot="appendli">就是个没用的</li>
            </aui-tabnavs>  
            <div class="aui-layout__item">右边的操作</div>                   
        </div>
    </div>
   
    <div class="tab-content" ref="tabcontent">
        <div role="tabpanel" class="tab-pane fade active in" :id="tabs[0].href" > 
            tab1
        </div>
        <div role="tabpanel" class="tab-pane fade" :id="tabs[1].href" > 
            tab2
        </div>
        <div role="tabpanel" class="tab-pane fade" :id="tabs[2].href" > 
            tab3
        </div>
    </div>      
</div>`;
    }
    _mounted() {
        var self = this;
    }
    _data() {
        var ret = {};    
        ret.tabs = [
            {
                active: 1,
                label: "Home",
                href: "ui_4_tab_1"
            },
            {
                active: 0,
                label: "Profile",
                href: "ui_4_tab_2"
            },
            {
                active: 0,
                label: "Messages",
                href: "ui_4_tab_3"
            }
        ];
        return ret;
    }
}

AUITabnavs.install();
window.AUICustomComponents.define("ui-example-tab", UiExampleTab);

export default createSubpageComponent(
    `<ui-example-tab></ui-example-tab>`
);